<template>
  <yd-layout>
    <public-head title="个人资料"></public-head>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left">姓名：</span>
        <yd-input slot="right" v-model="form.name" placeholder="请输入姓名"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">手机号：</span>
        <yd-input slot="right" v-model="form.phone" placeholder="请输入手机号码"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">微信：</span>
        <yd-input slot="right" v-model="form.weixin" placeholder="请输入您的微信号"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">QQ：</span>
        <yd-input slot="right" v-model="form.qq" placeholder="请输入您的QQ号"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">生日：</span>
        <yd-datetime type="date" v-model="form.birthday" slot="right" placeholder="请选择生日"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">联系地址：</span>
        <yd-input slot="right" v-model="form.address" placeholder="请输入您的联系地址"></yd-input>
      </yd-cell-item>
      <yd-cell-item arrow type="label">
        <span slot="left">性别：</span>
        <select slot="right" v-model="form.sex">
          <option value>请选择性别</option>
          <option value="1">男</option>
          <option value="2">女</option>
          <option value="3">保密</option>
        </select>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button size="large" type="primary" @click.native="submit">提交</yd-button>
    <loading v-if="is_loading"></loading>
  </yd-layout>
</template>

<script>
import { mapState, mapActions } from "vuex";
import moment from "moment";
import wx from "weixin-js-sdk";
export default {
  components: {},
  data() {
    return {
      showPop: false,
      valueKey: "text",
      chooseText: "请选择性别",
      chooseValue: "",
      sData: [
        {
          flex: 1,
          values: [
            { id: 100, text: "男" },
            { id: 101, text: "女" },
            { id: 103, text: "保密" }
          ],
          className: "slot1",
          textAlign: "center"
        }
      ],
      form: {
        id: "", //业主ID
        name: "", // 姓名
        phone: "", // 电话
        sex: "", // 性别
        weixin: "", // 微信
        qq: "", // QQ
        birthday: "", //生日
        address: "" //联系地址
      }
    };
  },
  created() {
    this.loadProfile();
  },
  watch: {},
  methods: {
    loadProfile() {
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/memberCenter", {
          token: this.token
        })
        .then(res => {
          this.isLoading(false);
          console.log(res);
          this.form = res.data.data;
        });
    },
    choose() {
      this.showPop = true;
    },
    toggleSelector(text, value) {
      this.showPop = false;
      this.chooseText = text;
      this.chooseValue = value;
      this.form.sex = value;
    },
    submit() {
      let reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      if (!this.form.phone || !reg.test(this.form.phone)) {
        this.$dialog.toast({
          mes: "请输入正确的联系方式",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      if (!this.form.name) {
        this.$dialog.toast({
          mes: "请输入你的姓名",
          timeout: 1000,
          icon: "error"
        });
        return;
      }
      var format_date;
      if (this.form.birthday) {
        format_date = moment(this.form.birthday).format("YYYY-MM-DD");
        // console.log(format_date);
      }

      // 提交接口
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/saveProfile", {
          token: this.token,
          id: this.form.id,
          name: this.form.name,
          phone: this.form.phone,
          sex: this.form.sex,
          weixin: this.form.weixin,
          qq: this.form.qq,
          birthday: format_date,
          address: this.form.address
        })
        .then(res => {
          this.isLoading(false);
          console.log(res);
          res.data.status
            ? (this.showAlert = true)
            : this.$dialog.toast({
                mes: res.data.message,
                timeout: 1000,
                icon: "error"
              });
        });
    },
    ...mapActions([
      "maintainInfo",
      "recordAddress",
      "location",
      "contactsId",
      "isLoading"
    ])
  },
  computed: {
    //遮罩状态
    mark() {
      return this.$store.getters.markStatus;
    },
    ...mapState([
      "toast",
      "toastText",
      "maintain_info",
      "curAddress",
      "degreeType",
      "lon",
      "lat",
      "token",
      "contacts_id",
      "is_loading"
    ])
  }
};
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
@import "../../common/style/transition.less";
.apply-maintain {
  .submit {
    display: block;
    margin: 0 auto;
    .wh(5rem, 0.8rem);
    background: #5b91fe;
    box-shadow: 0 3px 5px 0 rgba(91, 144, 254, 0.5);
    border-radius: 4px;
  }
}
</style>